<template>
  <a-modal
    width="80%"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="close" title="无人机任务"></modalTitle>
    </template>
    <div class="box">
      <iframe src="/wrjsxt/live.html" ref="iFrame1" id="iFrame1" name="iFrame1" width="100%" height="100%" frameborder="0"></iframe>
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
const emit = defineEmits(["close", "btnClick"])
const spUrl = ref("https://fh.dji.com/share/MCQ7FpnfgKJ")
const modalShow = ref(false)

const show = (e) => {
  modalShow.value = true
}

const close = () => {
  modalShow.value = false
  emit("close")
}

defineExpose({ show, close })
</script>
<style scoped>
.box {
  width: 100%;
  height: 70vh;
  position: relative;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 56px;
    z-index: 99999;
    background: #000;
  }
}
</style>
